<template>
    <div class="header-nav">
        <div class="left"></div>
        <div class="right">
            <a-dropdown
                trigger="click"
                placement="topRight"
                class="user-info-dropdown"
                :getPopupContainer="(el:HTMLElement)=>el"
            >
                <div class="user-info">
                    <img class="user" src="@/assets/user.png" />
                    <!-- <span :style="{ marginLeft: '10px' }">{{
                        userInfo.orgName
                    }}</span>
                    <span :style="{ marginLeft: '10px' }">{{
                        userInfo.departmentName
                    }}</span> -->
                    <span :style="{ marginLeft: '10px' }">{{
                        userInfo.userName
                    }}</span>
                    <!-- <span :style="{ marginLeft: '10px' }">{{
                        loginPhone
                    }}</span> -->
                </div>
                <template #overlay>
                    <a-menu>
                        <a-menu-item key="1" @click="hdlLogout">
                            退出登录
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
    import useGlobalStore from "@/stores/global.store";
    import loginService from "@/service/login.service";

    const { logOut } = useGlobalStore();
    const userInfo = computed(() => {
        let userInfoStr = localStorage.getItem("userInfo");
        if (!userInfoStr) {
            return "";
        }
        let userInfo = JSON.parse(userInfoStr);
        return userInfo;
    });

    const hdlLogout = async () => {
        console.log(123);
        await loginService.logout();
        logOut();
    };
</script>

<style lang="scss" scoped src="./HeaderNav.scss"></style>
